<script setup>
import { useUserStore } from '@/stores/authStores';

const userStore = useUserStore();


const handleLogout = () => {
  localStorage.removeItem('userInfo');
  userStore.logout();
}

const navs = [
  {
    title: "个人资料",
    key: "menu.profileDetails",
    link: "/profile",
    icon: "mdi-account-box-outline",
  },
  {
    title: "我喜欢的",
    key: "menu.plansAndBilling",
    link: "/plans-and-billing",
    icon: "mdi-heart-outline",
  },
  // {
  //   title: "收藏列表",
  //   key: "menu.team",
  //   link: "/team",
  //   icon: "mdi-bookmark-box-outline",
  // },
  // {
  //   title: "历史记录",
  //   key: "menu.apiDashboard",
  //   link: "/api-dashboard",
  //   icon: "mdi-monitor-dashboard",
  // },
  {
    title: "通知&回复",
    key: "menu.integrations",
    link: "/integrations",
    icon: "mdi-bell-outline",
  }
];

</script>

<template>
  <div v-if="userStore.isLoggedIn">
    <v-menu :close-on-content-click="false" location="bottom right" transition="slide-y-transition">
      <!-- :activator插槽，定义一个触发元素（激活器），用于控制菜单组件，常用语菜单、对话框、工具提示框的显示和隐藏 -->
      <template v-slot:activator="{ props }">
        <v-btn class="mx-2" icon v-bind="props">
          <v-badge content="2" color="success" dot bordered>
            <v-avatar size="40">
              <v-img src="https://kanekikeh.online/tongtong.png"></v-img>
            </v-avatar>
          </v-badge>
        </v-btn>
      </template>

      <!-- 菜单列表 -->
      <v-card max-width="300">
        <v-list lines="three" density="comfortable">
          <!-- ---------------------------------------------- -->
          <!-- Profile Area -->
          <!-- ---------------------------------------------- -->
          <v-list-item to="/profile">
            <!-- :prepend插槽用来在列表项的开始处插入内容。比如下方的插入图标-->
            <template v-slot:prepend>
              <v-avatar size="40">
                <v-img src="https://kanekikeh.online/tongtong.png"></v-img>
              </v-avatar>
            </template>

            <v-list-item-title class="font-weight-bold text-primary">
              {{ userStore.user.username }}

            </v-list-item-title>
            <v-list-item-subtitle>
              {{ userStore.user.email }}
            </v-list-item-subtitle>
          </v-list-item>
        </v-list>
        <v-divider />
        <!-- ---------------------------------------------- -->
        <!-- Menu Area -->
        <!-- ---------------------------------------------- -->

        <v-list variant="flat" elevation="0" :lines="false" density="compact">
          <v-list-item color="primary" v-for="(nav, i) in navs" :key="i" :to="nav.link" link density="compact">
            <template v-slot:prepend>
              <v-avatar size="30">
                <v-icon>{{ nav.icon }}</v-icon>
              </v-avatar>
            </template>

            <div>
              <v-list-item-subtitle class="text-body-2">{{
    nav.title
  }}</v-list-item-subtitle>
            </div>
          </v-list-item>
        </v-list>
        <v-divider />
        <!-- ---------------------------------------------- -->
        <!-- Logout Area -->
        <!-- ---------------------------------------------- -->
        <v-list variant="flat" elevation="0" :lines="false" density="compact">
          <v-list-item color="primary" to="nav.link" link density="compact">
            <template v-slot:prepend>
              <v-avatar size="30">
                <v-icon>mdi-lifebuoy</v-icon>
              </v-avatar>
            </template>

            <div>
              <v-list-item-subtitle class="text-body-2">
                帮助中心
              </v-list-item-subtitle>
            </div>
          </v-list-item>
          <v-list-item color="primary" link @click="handleLogout" density="compact">
            <template v-slot:prepend>
              <v-avatar size="30">
                <v-icon>mdi-logout</v-icon>
              </v-avatar>
            </template>

            <div>
              <v-list-item-subtitle class="text-body-2">
                退出
              </v-list-item-subtitle>
            </div>
          </v-list-item>
        </v-list>
      </v-card>
    </v-menu>
  </div>

  <div class="" v-else>
    <v-btn icon to="/auth/SignIn"> <v-icon>mdi-login</v-icon></v-btn>
  </div>
</template>

<style lang="scss" scoped></style>